<template>
    <div class="child_container">
        <ul>
            <li v-for="(item,index) in list" :key="index">
                <RouterLink :to="{
                    path:'/news/detail',
                    query:item
                }">{{ item.title }}</RouterLink>
            </li>
        </ul>
        <RouterView></RouterView>
    </div>
</template>

<script setup lang="ts">
import { RouterLink,RouterView } from 'vue-router';
import { reactive } from 'vue';
import { type news } from '@/types/router';
let list = reactive<news[]>([
    {
        id:1,
        title:'龙珠',
        content:'偶尔,我也有想过,就此转身离去!'
    },{
        id:2,
        title:'死神',
        content:'吾等因无形而被畏惧'
    }
    ,{
        id:3,
        title:'fate',
        content:'有许多人都在笑着,我认为,那一定不会错的.'
    }
])
</script>

<style scoped>
.child_container{
    height:calc(100% - 110px);
    width: calc(100% - 40px);
    padding: 20px;
    display: flex;
    justify-content: space-between;

}
ul li a{
    font-size: 24px;
    font-weight: bold;
    color: #738b7a;
    text-decoration: none;
}
</style>